<template>
  <div>
    <button id="myCustomFullscreenButton">myCustomFullscreenButton</button>
    <div id="ue_container"></div>
  </div>
</template>

<script setup>

// 导入需要的依赖
import {Config, PixelStreaming} from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.2';
import {
  Application,
  UIElementCreationMode
} from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2'
// const config = new Config({
//   useUrlParams: true,
//   initialSettings: {
//     ss: 'ws://192.168.45.26:80', // 像素流的 WS 地址，默认端口是8080
//     AutoConnect: true,
//     AutoPlayVideo: true,
//     MinQP: 30,
//     XRControllerInput: false,
//     GamepadInput: false,
//     TouchInput: false,
//     HoveringMouse: true,
//   }
// });
// // 创建像素流
//
// const stream = new PixelStreaming(config);
//
// // 创建像素流播放界面
// const application = new Application({
//   stream: stream,
//   onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode),
//   settingsPanelConfig: {
//     isEnabled: false,
//     visibilityButtonConfig: {creationMode: UIElementCreationMode.Disable}
//   },
//   fullScreenControlsConfig: {
//     creationMode: UIElementCreationMode.UseCustomElement,
//     customElement: document.getElementById('myCustomFullscreenButton')
//   }
// });
//
// // 将 UI 添加到 Web 页面 DOM 节点上
// document.getElementById('ue_container')?.appendChild(application.rootElement);
//
// // 监听创建后播放流的事件，还有其它事件，可以阅读 *.d.ts 类型定义文件了解
// stream.addEventListener('playStream', () => {
//   getCurrentWaterLevel();
// });

// stream.addResponseEventListener("handle_responses", (data)=>{
//   console.log(`接收到了UE传来的消息：${data}`);
// });
//
// stream.removeResponseEventListener("handle_responses");

</script>

<style scoped lang="less">
#ue_container {
  width: 100vw;
  height: 100vh;
}
</style>
